<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<div id="read_container">
	<div class="page-header">
	  <h1>${ contact.name }  ${ contact.firstname } <small>${ contact.email }</small></h1>
	   
	  
	  <div class="pagination-right span11">
		<button class="btn btn-mini btn-primary" type="button"><i class="icon-pencil icon-white"></i> Edit</button>
  		<button class="btn btn-mini btn-danger" type="button" onclick="deleteContact(${ contact.id }, '#content')"><i class="icon-trash icon-white"></i> Delete</button>
	  </div>
	</div>
	
	<div id="read_adresses">
		<div class="accordion" id="accordion2">
		  <div class="accordion-group">
		    <div class="accordion-heading">
		      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
		        <h4>Billing Address</h4>
		      </a>
		    </div>
		    <div id="collapseOne" class="accordion-body collapse in">
		      <div class="accordion-inner">
		      
		      	<address class="span8 offset2">
				  <strong>${ contact.name } ${ contact.firstname }</strong><br>
				  ${ contact.addresses[0].number } ${ contact.addresses[0].street }<br>
				  ${ contact.addresses[0].zipCode }, ${ contact.addresses[0].city }<br>				  
				</address>
		      		      	
		      </div>
		    </div>
		  </div>
		  <c:forEach var="address" items="${ contact.addresses }" begin="1">		      			      		       
		  <div class="accordion-group">
		    <div class="accordion-heading">
		      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
		        <h4>Shipping Addresses</h4>
		      </a>
		    </div>
		    <div id="collapseTwo" class="accordion-body collapse">
		      <div class="accordion-inner">
		        
				<address class="span8 offset2">
				  <strong>${ contact.name } ${ contact.firstname }</strong><br>
				  ${ address.number } ${ address.street }<br>
				  ${ address.zipCode }, ${ address.city }<br>				  
				</address>
				
		      </div>
		    </div>
		  </div>
		  </c:forEach> 
		</div>
	
	</div>
</div>
